@use '@scss/common' as *;

.post {
  border-bottom: 1px solid var(--grid-line-dark);
  position: relative;
  overflow: hidden;
  padding-bottom: 3rem;

  @include data-theme-selector('dark') {
    border-color: var(--grid-line-dark);
  }

  @include data-theme-selector('light') {
    border-color: var(--grid-line-light);
  }
}

.titleWrap {
  padding: 2.5rem 0;
}

.title {
  @include h1;
  & {
    margin: 0;
    width: calc(var(--column) * 11);
  }

  @include large-break {
    @include h2;
    margin: 0 !important;
  }

  @include mid-break {
    width: 100%;
  }
}

.breadcrumbs {
  margin: 0 0 1rem;
}

.guideBadge {
  @include body;
  & {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.125rem 0.375rem;
    margin: 0;
    border-radius: 6px;
    background: var(--theme-success-50);
    border: 1px solid var(--theme-success-250);
    color: var(--theme-success-600);
    letter-spacing: normal;
    font-weight: 400;
    vertical-align: middle;
    margin: 1rem 0 0;
  }
}

.allPosts {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  text-decoration: none;

  svg {
    transform: rotate(180deg);
  }
}

.blogWrap {
  display: flex;
  flex-direction: column;
}

.authorTimeSlots {
  padding: 2.5rem 1rem;
  border-bottom: 1px solid var(--grid-line-dark);

  @include data-theme-selector('dark') {
    border-color: var(--grid-line-dark);
  }

  @include data-theme-selector('light') {
    border-color: var(--grid-line-light);
  }

  @include mid-break {
    margin-top: 1rem;
  }
}

.dateSlot {
  padding: 1.25rem 0 0;
  display: flex;
  flex-direction: column;

  @include mid-break {
    padding: 0.5rem 0 0;
  }
}

.date {
  @include body;
  & {
    letter-spacing: 0;
    color: var(--theme-elevation-900);
    margin: 0;
  }
}

.publishLabel {
  @include h6;
}

.stickyColumn {
  @include mid-break {
    display: none;
  }
}

.stickyContent {
  top: 0;
  position: sticky;
}

.excerpt {
  margin: 3rem 0 1rem;

  @include mid-break {
    margin: 1rem 0;
  }
}

.heroImageWrap {
  margin-inline: calc(var(--column) * -1) calc(var(--column) * -4);
  @include mid-break {
    display: none;
  }
}

.heroImage {
  width: 100%;

  & img {
    width: 100%;
  }
}

.blocks {
  & > * {
    & > * {
      margin-top: 2rem;

      &:last-child {
        margin-bottom: 2rem;
      }
    }
  }
}

.mobileAuthor,
.mobileImage {
  display: none;

  @include mid-break {
    display: unset;
  }
}

@include mid-break {
  .mobileAuthor {
    margin-top: 1rem;
    display: flex;

    > * {
      width: 50%;
    }
  }

  .breadcrumbs {
    width: 100%;
  }
}

@include small-break {
  .titleWrap {
    display: unset;
  }

  .mobileAuthor {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
  }

  .heroImage {
    padding-bottom: 1.5rem;
  }
}
